<!doctype html>
<html>

	<head>
		<meta charset="utf-8">
		<title>待办列表</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../../../css/mui.min.css" rel="stylesheet" />
		<link href="../css/common.css" rel="stylesheet" />
    <style>
      .mui-pull-bottom-tips{
        background-color: #fff !important;
        text-align: center;
      }
      .mui-pull-top-tips {
      				position: absolute;
      				top: -20px;
      				left: 50%;
      				margin-left: -25px;
      				width: 40px;
      				height: 40px;
      				border-radius: 100%;
      				z-index: 1;
      			}
      			.mui-bar~.mui-pull-top-tips {
      				top: 24px;
      			}
      			.mui-pull-top-wrapper {
      				width: 42px;
      				height: 42px;
      				display: block;
      				text-align: center;
      				background-color: #efeff4;
      				border: 1px solid #ddd;
      				border-radius: 25px;
      				background-clip: padding-box;
      				box-shadow: 0 4px 10px #bbb;
      				overflow: hidden;
      			}
      			.mui-pull-top-tips.mui-transitioning {
      				-webkit-transition-duration: 200ms;
      				transition-duration: 200ms;
      			}
      			.mui-pull-top-tips .mui-pull-loading {
      				/*-webkit-backface-visibility: hidden;
      				-webkit-transition-duration: 400ms;
      				transition-duration: 400ms;*/
      				
      				margin: 0;
      			}
      			.mui-pull-top-wrapper .mui-icon,
      			.mui-pull-top-wrapper .mui-spinner {
      				margin-top: 7px;
      			}
      			.mui-pull-top-wrapper .mui-icon.mui-reverse {
      				/*-webkit-transform: rotate(180deg) translateZ(0);*/
      			}
      			.mui-pull-bottom-tips {
      				text-align: center;
      				background-color: #efeff4;
      				font-size: 15px;
      				line-height: 40px;
      				color: #777;
      			}
      			.mui-pull-top-canvas {
      				overflow: hidden;
      				background-color: #fafafa;
      				border-radius: 40px;
      				box-shadow: 0 4px 10px #bbb;
      				width: 40px;
      				height: 40px;
      				margin: 0 auto;
      			}
      			.mui-pull-top-canvas canvas {
      				width: 40px;
      			}
      			.mui-slider-indicator.mui-segmented-control {
      				background-color: #fff;
      			}
				.mui-bar{
					background-color: #0082E6;
				}
    </style>
	</head>

	<body>
    <div id="container">
      <header class="mui-bar mui-bar-nav">
          <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
          <h1 class="mui-title">待办</h1>
      </header>
      <div class="mui-content app-container" style="background-color: #fff;">
        <div id="slider" class="mui-slider mui-fullscreen" style="background-color: #fff;">
      	<!-- <div class="tab-wrap"> -->
            <div id="sliderSegmentedControl" class="mui-slider-indicator mui-segmented-control mui-segmented-control-inverted" style="text-align: left;">
      			<a class="mui-control-item mui-active" href="#item1"><span class="txt">待办</span></a>
      			<a class="mui-control-item" href="#item2"><span class="txt">已办</span></a>
            <!-- <span class="all">全部 ></span> -->
      		</div>
      	<!-- </div> -->
        <div class="tab-content mui-slider-group" id="tab-content">
          <div id="item1" class="mui-slider-item mui-control-content mui-active">
            <div id="item1-scroll">
            	<div id="scroll" class="regular-scroll mui-scroll-wrapper">
            		<div class="mui-scroll">
            			<ul class="mui-table-view commonList">
                    <!-- <li class="flex justify-between align-center" @tap="toDetail()">
                      <img src="../img/new@2x.png" alt="" class="new">
                      <div class="mui-table-cell flex-sub" style="padding-left: 30px;" @click="toDetail()">
                        <p class="text-grey text-sm">111</p>
                        <p class="text-block text-df">2222</p>
                        <p class="text-grey text-sm"><span>4444</span> <span>547</span></p>
                      </div>
                    </li> -->
            				<li class="flex justify-between align-center" v-for="item in waitList" @tap="toDetail(item)">
            				  <!-- <img src="../img/new@2x.png" alt="" class="new"> -->
            				  <div class="mui-table-cell flex-sub" style="padding-left: 30px;">
            				    <p class="text-grey text-sm">{{item.typeName}}</p>
            				    <p class="text-block text-df">{{item.targetName}}</p>
            				    <p class="text-grey text-sm"><span>{{time(item.createDate)}}</span> <span>{{item.createUserName}}</span></p>
            				  </div>
            				  <!-- <div class="tag-sm bg-blue text-white text-sm round">
            				    <span>模型修改</span>
            				  </div> -->
            				</li>
            			</ul>
            		</div>
            	</div>
            </div>
          </div>
          <div id="item2" class="mui-slider-item mui-control-content">
            <div id="item2-scroll">
            	<div id="scroll" class="regular-scroll mui-scroll-wrapper">
            		<div class="mui-scroll">
            			<ul class="mui-table-view commonList">
                    
            				<li class="flex justify-between align-center" v-for="item in doneList" @tap="toDoneDetail(item)">
            				  <!-- <img src="../img/new@2x.png" alt="" class="new"> -->
            				  <div class="mui-table-cell flex-sub" style="padding-left: 30px;">
            				    <p class="text-grey text-sm">{{item.typeName}}</p>
            				    <p class="text-block text-df">{{item.targetName}}</p>
            				    <p class="text-grey text-sm"><span>{{time(item.createDate)}}</span> <span>{{item.createUserName}}</span></p>
            				  </div>
            				  <!-- <div class="tag-sm bg-blue text-white text-sm round">
            				    <span>模型修改</span>
            				  </div> -->
            				</li>
            			</ul>
            		</div>
            	</div>
            </div>
          </div>
        </div>
      </div>
      </div>
    </div>
    
		<script src="../../../js/mui.js"></script>
    <script src="../../../js/mui.pullToRefresh.js"></script>
    <script src="../../../js/mui.pullToRefresh.material.js"></script>
		<script src="../../../js/jquery-1.7.2.min.js"></script>
    <script src="../../../js/vue.js"></script>
    <script src="../js/mkeyplus.base.js"></script>
		<script type="text/javascript">
			mui.init()
      var workVM = null; 
      var size = 15;
      var page = 0;
      var donePage = 0;
      mui.plusReady(function(){
        taskWait(page)
        taskDone(donePage)
      })
      workVM = new Vue({
      	el: '#container',
        data: {
        	height1: 0, // 列表高度
          waitList:[],
          doneList:[]
        },
        created:function() {
          this.initHeight()
        },
        methods: {
          // 设置高度
          initHeight: function() {
          	var height = window.innerHeight - 95;
          	this.height1 = height;
          },
          toDetail(item){
            console.log('11111')
            mui.openWindow({
              url: '../waitList/detail.html',
              id: '../waitList/detail.html',
              extras: {
                pageId: item.id
              }
            })
          },
          toDoneDetail(item){
            mui.openWindow({
              url: '../waitList/doneDetail.html',
              id: '../waitList/doneDetail.html',
              extras: {
                pageId: item.id
              }
            })
          },
          time(time) {
            var date = new Date(time);
            var year = date.getFullYear();
            var mon = date.getMonth() + 1;
            var day = date.getDate();
            var hours = date.getHours();
            var minu = date.getMinutes();
            var sec = date.getSeconds();
            return year + '-' + mon + '-' + day + ' ' + hours + ':' + minu + ':' + sec;
          },
        }
      })
      $('#content').on('tap', 'li', function() {
      		mui.openWindow({
      			url: '../myTask/detail.html',
      			id: '../myTask/detail.html',
      			createNew: false, //是否重复创建同样id的webview，默认为false:不重复创建，直接显示
      
      		})
      	});
      (function($) {
      				//阻尼系数
        var deceleration = mui.os.ios?0.003:0.0009;
        $('.mui-scroll-wrapper').scroll({
          bounce: false,
          indicators: true, //是否显示滚动条
          deceleration:deceleration
        });
        $.ready(function() {
          //循环初始化所有下拉刷新，上拉加载。
          $.each(document.querySelectorAll('.mui-slider-group .mui-scroll'), function(index, pullRefreshEl) {
            $(pullRefreshEl).pullToRefresh({
              down: {
                callback: function() {
                  var self = this; 
                  setTimeout(function() {
                  	if(index===0){
                  	  page=0
                  	  taskWait(page);
                  	}else{
                      donePage=0;
                      taskDone(donePage);
                    }
                  	self.endPullDownToRefresh();
                  }, 1000);
                  
                }
              },
              up: {
                callback: function() {
                 var self = this;
                 setTimeout(function() {
                 	if(index===0){
                 	  page++;
                 	  taskWait(page);
                 	}else{
                      donePage++;
                      taskDone(donePage);
                    }
                 	self.endPullUpToRefresh();
                 }, 1000);
                }
              }
            });
          });
          mui("#item1 .mui-scroll").pullToRefresh().endPullUpToRefresh(true);
          mui("#item2 .mui-scroll").pullToRefresh().endPullUpToRefresh(true);
        });
      })(mui);
      function taskWait(page) {
        if(page===0){
          plus.nativeUI.showWaiting('加载中...');
        }
        mui.baseApp.httpRequst("/api/task/backlog", {
          page: page,
          size: size
        }, function(data) {
          plus.nativeUI.closeWaiting();
          if (page == 0) {
            workVM.waitList = []
          }
          workVM.waitList = workVM.waitList.concat(data.records)
          // console.log('设备档案数据' + JSON.stringify(data))
          //如果每次获取数据小于10条,或未获取成功则显示没有更多了.
          if (data.records.length < size) { //
           mui("#item1 .mui-scroll").pullToRefresh().endPullUpToRefresh(true); //参数为true代表没有更多数据了。
            return;
          } else {
           mui("#item1 .mui-scroll").pullToRefresh().endPullUpToRefresh(false); //参数为true代表没有更多数据了。
           mui("#item1 .mui-scroll").pullToRefresh().refresh(true); //启用上拉加载
          }
        }, function() {
          plus.nativeUI.closeWaiting()
          console.log("获取数据失败");
        })
      }
      function taskDone(page) {
        if(page===0){
          plus.nativeUI.showWaiting('加载中...');
        }
        mui.baseApp.httpRequst("/api/task/havedoneByUnderway", {
          page: page,
          size: size
        }, function(data) {
          plus.nativeUI.closeWaiting();
          if (page == 0) {
            workVM.doneList = []
          }
          workVM.doneList = workVM.doneList.concat(data.records)
          // console.log('设备档案数据' + JSON.stringify(data))
          //如果每次获取数据小于10条,或未获取成功则显示没有更多了.
          if (data.records.length < size) { //
           mui("#item2 .mui-scroll").pullToRefresh().endPullUpToRefresh(true); //参数为true代表没有更多数据了。
            return;
          } else {
           mui("#item2 .mui-scroll").pullToRefresh().endPullUpToRefresh(false); //参数为true代表没有更多数据了。
           mui("#item2 .mui-scroll").pullToRefresh().refresh(true); //启用上拉加载
          }
        }, function() {
          plus.nativeUI.closeWaiting()
          console.log("获取数据失败");
        })
      }
      document.getElementById('slider').addEventListener('slide', function(e) {
      	console.log(e.detail.slideNumber);
      	
      });  
      window.addEventListener("update", function(e) {
        console.log('更新数据');
        page=0;
        donePage=0;
        taskWait(page)
        taskDone(donePage)
      });
      mui.back = function(){
          //显示上一个界面；  
         var self = plus.webview.currentWebview();
         var opener = self.opener(); 
         //继续当前页面原有返回逻辑  
         mui.fire(opener, 'back', {});
      }
		</script>
	</body>

</html>
